<template>
  <div style="margin: 20px 30px">
    <el-button type="success" @click="addUser">新增</el-button>

    <el-dialog v-model="dialogVisible" title="填写信息" width="30%">

      <el-form :model="form" label-width="80px">
        <el-form-item label="用户名:">
          <el-input v-model="form.username" style="width: 85%"/>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="80px">
        <el-form-item label="密码:">
          <el-input v-model="form.password" style="width: 85%"/>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addUserConfirm">确定</el-button>
        </span>
      </template>

    </el-dialog>

  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: 'Home',
  components: {

  },
  data(){
    return{
      form: {},
      dialogVisible: false
    }
  },
  methods: {
    addUser(){
      this.dialogVisible = true
      this.form = {}
    },
    addUserConfirm(){
      this.dialogVisible = true
      request.post("/user",this.form).then(res => {
        console.log(this.form)
        console.log(res)
      })
    }
  }
}
</script>